import React, { useState, useMemo, useCallback, useRef } from 'react'
import {
  View,
  Button,
  StyleSheet,
  FlatList,
  Switch,
  Text,
  TouchableOpacity
} from 'react-native'

import { ListData } from '@/constants/Data'
import { ListData2, TypeColors } from '@/constants/Data'

// TODO_LYS:    暂时还没有写完哦
export default function ConsumeList14_2() {
  const [data, setData] = useState<any>(ListData)
  const [showType, setShowType] = useState<boolean>(true)
  const styles = useRef(
    StyleSheet.create({
      root: {
        width: '100%',
        height: 700,
        backgroundColor: '#f9f9f9'
      },
      titleLayout: {
        width: '100%',
        height: 56,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#cccccc'
      },
      titleTxt: {
        fontSize: 18,
        color: '#333',
        fontWeight: 'bold'
      },
      totalTxt: {
        fontSize: 20,
        color: '#333',
        fontWeight: 'bold'
      },
      totalLayout: {
        width: '100%',
        height: 60,
        flexDirection: 'row-reverse',
        borderTopWidth: 1,
        borderTopColor: '#c0c0c0',
        alignItems: 'center',
        paddingHorizontal: 16
      },
      switch: {
        position: 'absolute',
        right: 16
      },
    })
  ).current

  const onItemPress = useCallback(
    (item: any, index: number) => () => {
      console.log(`点击第${item?.index || '\t'}行`)
    },
    []
  )

  const TotalAmountView = useMemo(() => {
    const total = data
      .map((item: any) => item.amount)
      .reduce((pre: number, cur: number) => pre + cur)
    console.log('重新渲染合计')
    return (
      <View style={styles.totalLayout}>
        <Text style={styles.totalTxt}>{total}</Text>
        <Text style={styles.totalTxt}>合计：</Text>
      </View>
    )
  }, [data])

  // 组件用来渲染每一项的
  const RenderItem = ({ item, index }: any) => {
    const styles = StyleSheet.create({
      itemLayout: {
        width: '100%',
        padding: 16,
        flexDirection: 'column',
        borderBottomWidth: 1,
        borderBottomColor: '#E0E0E0'
      },
      labelRow: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center'
      },
      valueRow: {
        marginTop: 10
      },
      labelTxt: {
        flex: 1,
        fontSize: 14,
        color: '#666'
      },
      first: {
        flex: 0.4
      },
      second: {
        flex: 0.3
      },
      last: {
        flex: 0.6
      },
      valueTxt: {
        flex: 1,
        fontSize: 18,
        color: '#333',
        fontWeight: 'bold'
      },
      typeLayout: {
        flex: 0.3
      },
      typeTxt: {
        width: 20,
        height: 20,
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'white',
        borderRadius: 4,
        fontWeight: 'bold'
      },
    })

    return (
      <TouchableOpacity
        style={styles.itemLayout}
        onPress={onItemPress(item, index)}>
        <View style={styles.labelRow}>
          <Text style={[styles.labelTxt, styles.first]}>序号</Text>
          {showType && (
            <Text style={[styles.labelTxt, styles.second]}>类型</Text>
          )}
          <Text style={styles.labelTxt}>消费名称</Text>
          <Text style={[styles.labelTxt, styles.last]}>消费金额</Text>
        </View>
        <View style={[styles.labelRow, styles.valueRow]}>
          <Text style={[styles.valueTxt, styles.first]}>{item?.index}</Text>
          {showType && (
            <View style={styles.typeLayout}>
              <Text
                style={[
                  styles.typeTxt,
                  { backgroundColor: TypeColors[item.type] }
                ]}>
                {item.type}
              </Text>
            </View>
          )}
          <Text style={styles.valueTxt}>{item.name}</Text>
          <Text style={[styles.valueTxt, styles.last]}>{item.amount}</Text>
        </View>
      </TouchableOpacity>
    )
  }

  const calculateTotal = useMemo(() => {
    console.log('重新计算合计')
    return data
      .map((item: any) => item.amount)
      .reduce((pre: number, cur: number) => pre + cur, 0)
  }, [data])

  return (
    <View>
      {/* <Text>14_2useMemo缓存计算结果&缓存ui&useCallback_ConsumeList</Text> */}
      <View style={styles.root}>
        <View style={styles.titleLayout}>
          <Text style={styles.titleTxt}>消费记账单</Text>
          <Switch
            style={styles.switch}
            value={showType}
            onValueChange={(value) => setShowType(value)}
          />

          <Button
            title="切换数据"
            onPress={() => {
              // data === ListData ? setData(ListData2) : setData(ListData)
              setData(ListData2)
            }}
          />
        </View>

        <FlatList
          data={data}
          keyExtractor={(item, index) => `${item.index}-${item.name}`}
          renderItem={RenderItem}
        />
        {/* <View style={styles.totalLayout}>
          <Text style={styles.totalTxt}>{calculateTotal}</Text>
          <Text style={styles.totalTxt}>合计：</Text>
        </View> */}
        {/* <TotalAmountView /> */}
        {TotalAmountView}
      </View>
    </View>
  )
}
